import { ref } from 'vue'
import style from '../style/index.module.scss'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import type { EnrollPage } from '@/type/login';
function enroll() {
  const formData = ref<EnrollPage>({
    username: '',
    password: '',
    email: '',
    code: '',
  })

  return vine`
    <div :class="style.enrollPage">
    <h1>注册</h1>
    <ElForm :model="formData" label-width="auto" >
        <ElFormItem >
        <ElInput style="width: 300px"  v-model="formData.username"  placeholder="用户名"/>
        </ElFormItem>
        <ElFormItem >
        <ElInput style="width: 300px"  v-model="formData.password"  placeholder="密码"/>
        </ElFormItem>
        
        <ElFormItem >
        <ElInput style="width: 300px"  v-model="formData.email"  placeholder="邮箱"/>
        </ElFormItem>

        <ElFormItem >
        <ElInput style="width: 300px"  v-model="formData.code"  placeholder="验证码">
        <template #suffix>
        <ElButton size="small" color="var(--el-color-primary)">获取验证码</ElButton>
        </template>
        </ElInput>
        </ElFormItem>
        <ElFormItem  >
         <el-button style="width:100%;" size="large" color="var(--el-color-primary)">注册</el-button>
        </ElFormItem>
    </ElForm>
    </div>
  `

}

export default enroll